<template>
	<div class="project-card-component">
		<div class="card-title no-wrap">
			<span :class="['index-circle',dataSource.index.length===1?'fulll-circle':'radius-circle']">{{dataSource.index}}</span>
			<span>{{dataSource.title}}</span>
		</div>
		<div class="card-divider divider1"></div>
		<div class="card-content">
			<div class="card-content-title">生产进度</div>
			<div class="card-content-board-row">
				<days-board :days="{number1:dataSource.planDaysNumber,number2:dataSource.actDaysNumber}"  unit="天" />
			</div>
			<div class="card-content-percent-row">
				<div class="percent-layer1">
					<div class="value-text">{{dataSource.completePercentText}}</div>   <!-- 被遮在下面的层，作用于撑空间 -->
					<div class="percent-layer2" :style="{width:dataSource.completePercentText}"></div>  <!-- 中间层，进度条 -->
					<div class="percent-layer3">{{dataSource.completePercentText}}</div>  <!-- 最高层，文字 -->
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import DaysBoard from '@/views/components/DaysBoard.vue'		
const props = defineProps({
	dataSource:{
		type:Object,
		default:function(){
			return {
				index:'0',
				title:'',
				planDaysNumber:0,
				actDaysNumber:0,
				completePercentText:'0%'
			}
		}
	}
})	
</script>

<style scoped lang="scss">
.project-card-component {
	height: 100%;
	display: flex;
	flex-direction: column;
	.card-title,.card-divider{
		flex-shrink: 0;
	}
	.card-title,.card-content{
		background: rgba(6,48,109,.5);
	}
	.card-title {
		color: white;
		font-size: .7em;
		padding: .4em 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.index-circle {
			color: #7EEFD6;
			border: 1px solid #7EEFD6;
			background-color: #032259;
			display: inline-block;
			font-size: .88em;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: .4em;
			box-sizing: border-box;
			&.fulll-circle{
				border-radius: 50%;
				width: 1.12em;
				height: 1.12em;
			}
			&.radius-circle{
				border-radius: .5em;
				padding: .001em .2em;
			}
		}
	}
	.card-divider {
		&.divider1 {
			height: .2em;
		}
	}
	.card-content{
		flex-grow: 1;
		height: 1px;
		display: flex;
		flex-direction: column;
		.card-content-title,.card-content-percent-row {
			flex-shrink: 0;
		}
		.card-content-title{
			font-size: .7em;
			color: white;
			text-align: center;
			padding-top: .4em;
			padding-bottom: .8em;
		}
		.card-content-board-row{
			flex-grow: 1;
			height: 1px;
		}
		.card-content-percent-row {
			padding:.3em .14em .2em .14em;
			.percent-layer1{
				width: 100%;
				color: white;
				background-color: #032259;
				text-align: center;
				overflow: hidden;
				border-radius: .6em;
				position: relative;
				.value-text,.percent-layer3{
					font-size: .8em;
					padding: .15em 0;
					overflow: hidden;
				}
				.percent-layer2,.percent-layer3{
					position: absolute;
					top: 0;
					left: 0;
				}
				.percent-layer2{
					z-index: 1;
					overflow: hidden;
					border-radius: .6em;
					height: 100%;
					background-image:  linear-gradient(to right,#F83800,#E1E300);
				}
				.percent-layer3 {
					width: 100%;
					z-index: 2;
				}
			}
		}
	}
}
</style>